<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root"></div>
<script src="../../javascript/react.development.js"></script>
<script src="../../javascript/react-dom.development.js"></script>
<script src="../../javascript/babel.min.js"></script>
<script type="text/babel">
    /*
    * 高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数 (函数作为参数，函数内部返回函数)
    *   若A函数，接收的参数是一个函数，那么A函数可以称之为高阶函数
    *   若A函数，调用的返回值还是一个函数，那么A函数可以称之为高阶函数
    *
    * 函数柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式
    * */
    class App extends React.Component {
        constructor(props, context) {
            super(props, context)
            this.state = {userName: "", password: ""}
        }

        render() {
            const {userName, password} = this.state
            return (
                <div className="app">
                    <form>
                        {/*将saveFormData函数的返回值作为onChange的回调*/}
                        <input type="text" value={userName} onChange={this.saveFormData("userName")}/>
                        {/*将saveFormData函数的返回值作为onChange的回调*/}
                        <input type="text" value={password} onChange={this.saveFormData("password")}/>
                        <button>登录</button>
                    </form>
                </div>
            );
        }


        // 高阶函数
        saveFormData = (dataType) => {
            //saveFormData函数返回的是一个函数，将这个返回的函数作为事件的回调去使用
            return (event) => {
                this.setState({[dataType]: event.target.value})
            }
        }

    }

    ReactDOM.render(<App></App>, document.querySelector("#root"))
</script>
</body>
</html>